<template>
    <div class="index_main">
        <div class="btnBox">
            <el-button type="primary" @click="addGoods">配置领券活动</el-button>
            <el-select v-model="areaId" placeholder="请选择" style="margin-left: 10px;" @change="areaChange">
                <el-option label="平台领劵中心" value=""></el-option>
                <el-option v-for="(aitem, aindex) in areaList" :key="aindex" :label="aitem.name" :value="aitem.id">
                </el-option>
            </el-select>
        </div>
        <div class="phone_box">
            <div class="header_img">
                <img src="@/static/phone_top_vc.png" alt="" />
            </div>
            <div class="ph_main">
                <div class="banner_box " @click="addBanner">
                    <el-carousel height="154px" class="banner">
                        <el-carousel-item v-for="(item, index) in bannerList" :key="index + 'b'">
                            <img class="bannerImg" :src="item.imgUrl" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="baoxiang">
                    <div class="chestList">
                        <!--使用draggable组件-->
                        <draggable v-model="vouchersList" sort="false" chosenClass="chosen" forceFallback="true"
                            group="punchActivity" animation="1000" @start="onPunchActivityStart" @end="onPunchActivityEnd">
                            <transition-group>
                                <!-- <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> -->
                                <div class="list" v-for="(item, index) in vouchersList" :key="index + 'p'">
                                    <div class="fen" :class="item.activityStatus == 2?'':'opacity'">
                                        <div class="status_box" >{{item.useConditionsDict}}</div>
                                        <div class="box">
                                            <div class="money" v-if="item.couponType == 1">
                                                <span class="min_m">￥</span>
                                                <span class="max_m">{{ item.preferentialDiscount }}</span>
                                            </div>
                                            <div class="money" v-else-if="item.couponType == 2">
                                                <span class="max_m">{{ item.preferentialDiscount }}</span>
                                                <span class="min_m">折</span>
                                            </div>
                                            <div class="tiao">满{{ item.preferentialCondition }}使用</div>
                                        </div>
                                    </div>
                                    <div class="main">
                                        <div class="main_l" :class="item.activityStatus == 2?'':'opacity'">
                                            <div class="main_l_t">
                                                <div class="main_l_title ellipseHide">{{ item.couponName }}</div>
                                                <img class="main_l_img" :src="require('@/static/man_icon.png')"  v-if="item.couponType == 1">
                                                <img class="main_l_img" :src="require('@/static/zhe_icon.png')"  v-else-if="item.couponType == 2">
                                            </div>
                                            <div class="main_l_time">{{ item.validityDate }}</div>
                                        </div>
                                        <img class="main_r" :src="require('@/static/weikaishi.png')" v-if="item.activityStatus == 1">
                                        <img class="main_r" :src="require('@/static/lijilingqu.png')" v-else-if="item.activityStatus == 2">
                                        <img class="main_r" :src="require('@/static/yijieshu.png')" v-else-if="item.activityStatus == 3">
                                    </div>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </div>

            </div>
        </div>
        <banner-diglog v-if="bannerDiglog" :pathType="bannerPath" :visible.sync="bannerDiglog" @success="_handleSuccess"
            :configType="2" />
        <voucher-diglog v-if="voucherDiglog" :pathType="punchActivityPath" :areaId="areaId"  :visible.sync="voucherDiglog"
            @success="_handleSuccess" />
    </div>
</template>
<script>
import {
    kyyBannerConfigList,
    platformCouponConfigV1List,
    platformCouponConfigSave,
    kyyBannerConfigGovAreaList
} from '@/api/clientManagement/businessSetting'
import bannerDiglog from './components/bannerDiglog'
import voucherDiglog from './components/voucher_collection/voucherDiglog'
import draggable from 'vuedraggable' //拖动组件

export default {
    name: "BeeTokenSystemH5VoucherCollectionCenter",
    components: {
        bannerDiglog,
        voucherDiglog,
        draggable
    },
    props: {
    },
    data() {
        return {
            bannerDiglog: false,
            voucherDiglog: false,
            bannerPath: 'add',
            bannerList: [],//轮播图列表
            vouchersList: [],//配置推荐商家
            punchActivityPath: 'add',
            // 区域选择
            areaList: [],
            areaId: '',
            platformType:1, //发放平台 1 平台领券中心 2 海口高新区政府
        };
    },
    watch: {

    },
    created() {
        this.getbannerList()
        this.getKyyBannerConfigGovAreaList()
        this.getPlatformCouponConfigV1List()
    },
    mounted() {

    },
    methods: {
        //获取轮播图 广告配置类型 1-首页 2-领券中心
        getbannerList() {
            kyyBannerConfigList(2).then((res) => {
                this.bannerList = res.result
            })
        },
        // 获取区域选择列表
        getKyyBannerConfigGovAreaList() {
            kyyBannerConfigGovAreaList().then((res) => {
                this.areaList = res.result
            });
        },
        // 切换地区
        areaChange(){
            if(this.areaId == ''){
                this.platformType = 1
            }else{
                this.platformType = 2
            }
            this.getPlatformCouponConfigV1List()
        },
        //获取配置推荐商家
        getPlatformCouponConfigV1List() {
            // 区域id 为空 就是平台领券中心
            // 	发放平台 1 平台领券中心 2 海口高新区政府 
            var params = {
                areaId:this.areaId,
            }
            // if(params.areaId == ''){
            //     params.platformType = 1
            // }else{
            //     params.platformType = 2
            // }
            platformCouponConfigV1List(params).then(res => {
                this.vouchersList = res.result
            })
        },
        //添加轮播图
        addBanner() {
            this.bannerDiglog = true
            if (this.bannerList.length > 0) {
                this.bannerPath = 'edit'
            } else {
                this.bannerPath = 'add'
            }
        },
        //新增宝箱商品
        addGoods() {
            this.voucherDiglog = true
            if (this.vouchersList.length > 0) {
                this.punchActivityPath = 'edit'
            } else {
                this.punchActivityPath = 'add'
            }
        },
        _handleSuccess() {
            this.getbannerList()
            this.getPlatformCouponConfigV1List()
        },

        //开始拖拽事件
        onPunchActivityStart() {
            this.drag = true
        },
        //拖拽结束事件
        onPunchActivityEnd() {
            this.drag = false
            // console.log('vouchersList', this.vouchersList)
            // editPunchActivitySort
            var list = []
            this.vouchersList.forEach(item => {
                list.push(item.id)
            })
            var data = {
              areaId:this.areaId,
              couponIdList:list
            }
            platformCouponConfigSave(data).then(res => { })
        },
    },
};
</script>
<style lang="scss" scoped>
.ellipseHide{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}
.opacity{
    opacity: 0.5;
}
.phone_box {
    width: 395px;
    min-height: 1000px;
    border-radius: 30px;
    border: 10px solid #333;
    margin: 40px 200px 0 100px;
    background: #fff;
    box-sizing: border-box;
}

.header_img {
    width: 100%;

    img {
        width: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
}

.ph_main {
    padding: 10px 0;

    .banner_box{
        width: 100%;
        padding-bottom: 11px;
        background: #fff;
        .banner {
            width: 345px;
            height: 154px;
            border-radius: 10px;
            color: #fff;
            margin: 0 auto;
            cursor: pointer;
        .bannerImg {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }
      }
    }


}

.baoxiang {
    margin-bottom: 10px;
    background: #f6f6f6;

    .chestList {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;

        .list {
            // margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            background: url('~@/static/list_bj.png') no-repeat;
            height: 114px;
            background-size: 100% 100%;
            margin-top: 19px;
            .fen {
                width: 105px;
                height: 114px;
                display: flex;
                justify-content: center;
                position: relative;

                .status_box {
                    height: 17px;
                    line-height: 18px;
                    border-radius: 4px 0;
                    background: #FF6751;
                    color: #FFFFFF;
                    font-size: 11px;
                    padding: 0px 6px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .box {
                    width: 81px;
                    height: 81px;
                    margin-top: 25px;
                    background: url('~@/static/certificate_l.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .money {
                        color: #fff;
                        .min_m {
                            font-size: 16px;
                        }

                        .max_m {
                            font-size: 25px;
                            font-weight: 500;
                        }
                    }

                    .tiao {
                        font-size: 12px;
                        color: #fff;
                    }
                }
            }

            .main {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 12px;

                .main_l {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-bottom: 11px;

                    .main_l_t {
                        position: relative;
                        top: 22px;
                    }

                    .main_l_title {
                        font-size: 15px;
                        color: #333333;
                        margin-bottom: 6px;
                        font-weight: 500;
                        width: 150px;
                    }

                    .main_l_img {
                        width: 38px;
                        height: 14px;
                        margin-bottom: 10px;
                    }

                    .main_l_time {
                        font-size: 12px;
                        color: #999999;
                    }
                }

                .main_r {
                    width: 57px;
                    height: 57px;
                }
            }
        }
    }
}</style>
  